<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>
        文章类型
    </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="static/css/x-admin.css" media="all">

</head>
<body>
<div class="layui-body" style="left: 0">
    <div id="map_container" style="height: 100%;width: 100%"></div>
</div>


<script src="static/js/jquery.min.js" charset="utf-8"></script>
<!-- 引入 layui.js -->
<script src="static/lib/layui/layuis.js"></script>
<script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=waApPw6gErjwfBBALf71OCgLTk8FbPqr"></script>

<script>
    //百度地图API功能
    function loadJScript() {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "//api.map.baidu.com/api?v=2.0&ak=waApPw6gErjwfBBALf71OCgLTk8FbPqr&callback=init";
        document.body.appendChild(script);
    }

    loadJScript()

    var data =
    {{data|tojson  }}

    var map = null
    window.init = function () {
        map = new BMapGL.Map("map_container");          // 创建地图实例
        var point = new BMapGL.Point(116.404, 39.915);  // 创建点坐标
        map.enableScrollWheelZoom(true);
        map.centerAndZoom(point, 5);

        map.clearOverlays();
        var dataJson = JSON.parse(data)

        for (var i = 0; i < dataJson.length; i++) {
            (function (item) {
                if (item.latitude && item.longitude) {
                    console.log(item.id)
                    var insectPoint = new BMapGL.Point(item.longitude, item.latitude);
                    var label = new BMapGL.Label(item.insect_name, {
                        position: insectPoint,
                    })
                    map.addOverlay(label);
                    var infoWindow = new BMapGL.InfoWindow(initModel(item), {title: "名称：" + item.insect_name});  // 创建信息窗口对象
                    label.addEventListener("click", function () {
                        map.openInfoWindow(infoWindow, insectPoint); //开启信息窗口
                    });
                }
            })(dataJson[i]);


        }
    }

    function initModel(item) {
        var sContent = `<div id="` + item.id + `" style="padding: 5px">
        <span style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>
        简介：` + item.insect_introduce + `
        </span>
        <img style='margin:0 auto' src='` + item.img_url + `' width='100' height='100'/>
        </div>`;
        return sContent
    }


</script>
</body>
</html>